<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Add Behaviors to Objects with &#x60;mix&#x60;</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Add Behaviors to Objects with &#x60;mix&#x60;</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>Add behaviors to objects or static classes with <code>mix</code></p>
</div>

<div class="example">
    <script>
YUI().use('node', function(Y) {

var Logging = function () {
    var logger = null;
    
    return {
        initLogger : function (logNode) {
            if (!logger) {
                logger = Y.one(logNode);
            }
        },

        log : function (message) {
            if (logger) {
                logger.append('<p>' + message + '</p>');
            }
        }
    }
}();

var PageController = function () {
    var app_const = 12345;

    return {

        getConst : function () { 
            return app_const;
        },

        logConst : function () {
            this.initLogger('#demo_logger');
            this.log('PageController class constant = ' + this.getConst() +
                      ', logged courtesy of object augmentation via Y.mix.');
        }
    };
}();

Y.mix(PageController, Logging);

Y.on('click', PageController.logConst, '#demo_btn', PageController);


});
</script>

<button id="demo_btn">Click me</button>
<div id="demo_logger"></div>


</div>


<h3 id="using-mix">Using <code>mix</code></h3>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, function(Y) {
    &#x2F;&#x2F; This method is in the core of the library, so we don&#x27;t have to use() any
    &#x2F;&#x2F; additional modules to access it.  However, this example requires &#x27;node&#x27;.</pre>


<h3 id="adding-functionality-to-individual-objects">Adding functionality to individual objects</h3>
<p>Static classes, such as <code>DOM</code>, are implemented as object literals
with keys corresponding to public class methods.  As such, static classes
aren't candidates for instantiation or prototype extention.  To add
functionality to static classes, you need to work with the class's object
literal.</p>

<p>In this example, <code>mix</code> is used to add a set of behaviors to a static class.</p>

<pre class="code prettyprint">var Logging = function () {
    var logger = null;
    
    return {
        initLogger : function (logNode) {
            if (!logger) {
                logger = Y.one(logNode);
            }
        },

        log : function (message) {
            if (logger) {
                logger.append(&#x27;&lt;p&gt;&#x27; + message + &#x27;&lt;&#x2F;p&gt;&#x27;);
            }
        }
    }
}();

var PageController = function () {
    var app_const = 12345;

    return {

        getConst : function () { 
            return app_const;
        },

        logConst : function () {
            this.initLogger(&#x27;#demo_logger&#x27;);
            this.log(&#x27;PageController class constant = &#x27; + this.getConst() +
                      &#x27;, logged courtesy of object augmentation via Y.mix.&#x27;);
        }
    };
}();

Y.mix(PageController, Logging);

Y.on(&#x27;click&#x27;, PageController.logConst, &#x27;#demo_btn&#x27;, PageController);</pre>


<h3 id="much-like-augment">Much like <code>augment</code></h3>
<p><code>mix</code> works in similar fashion to <code>augment</code>.  In fact, <code>augment</code> uses <code>mix</code> under the hood.  However, rather than adding functionality to class definitions (i.e. function prototypes), <code>mix</code> can work with any object, including object literals and class instances.</p>

<p>See <code>augment</code> and <code>extend</code> for other techniques to help manage your code structure.</p>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#using-mix">Using <code>mix</code></a>
</li>
<li>
<a href="#adding-functionality-to-individual-objects">Adding functionality to individual objects</a>
</li>
<li>
<a href="#much-like-augment">Much like <code>augment</code></a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Setting up a YUI Instance">
                                        <a href="yui-core.html">YUI Core</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="On-demand loading of YUI and non-YUI assets">
                                        <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
                                        <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
                                        <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
                                        <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
                                        <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
                                        <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
                                        <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with YUI 2 in 3">
                                        <a href="yui-yui2.html">Working with YUI 2 in 3</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Natively use YUI Gallery Modules">
                                        <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
